<template>
  <div class="preview_wrapper">
    <Header :componentInfoHeader="componentInfoHeader" @save="saveResult" />
    <CenterControl :currentFile="files.current" pageType="mark" filesType="1" @hideHeader="hideHeader" @changeFileList="changeFileList" @nextTask="nextTask" @preTask="preTask" @markBadData="markBadData" />
    <FileList :listShow="listShow" />
    <MarkContent ref="MarkContent" :files="files" pageType="mark"/>
  </div>
</template>

<script>
import Header from './Header'
import CenterControl from './CenterControl'
import FileList from './FileList'
import MarkContent from './MarkContent'
let saveDataBase = {}; // 模拟数据库
let self = null;
export default {
  name: 'Preview',
  data () {
    return {
      // 头部组件参数
      componentInfoHeader: {
        curName: '', // 文件名
        standardBtnShow: true, // 标注规范显示
        standardCnt: '', // 标注规范内容
        abandonBtnShow: false, // 重新认证按钮显示
        repulseBtnShow: false, // 打回按钮显示
        isRecheck: false, // 是否是复检环节
        saveBtnShow: true, // 保存按钮显示
        historyBtnShow: true, // 历史按钮显示
        shortcutBtnShow: true, //  快捷键展示
        submitBtnShow: true,
        shortcutkeys: [], // 快捷键配置
        showVersionInfo: false // 展示历史按钮
      },
      files: {
        // 文件信息
        lastIndex: 0, // 上次标注的文件id
        allInfo: [], // 全部数据
        showType: 1, // 1 表示全部 2 表示好数据，3表示坏数据，4表示未标注
        showList: [],
        current: null, // 当前的数据
        curIndex: 0, // 当前数据的id
        allImage: [], // 全部的图片
        currentPoint: null // 给点添加标签 新增字段
      }, // 文件相关
      showType: false,
      listShow: false,
      saveCheckType: 0 // 0 校验失败 1校验成功
    }
  },
  // 同步原始数据拉取
  async created () {
    self = this;
    // await getFileListPromise.then(this.getFileCallBack);
    let mockData = `{"pageElement":{"originalLng":"CN","targetLng":"EN","isCopy":true,"isTerm":true},"markName":"nn文本翻译_nn文本翻译1111_B046066","files":[{"extend":{"user":{"reference": "I bought the fruit","resultText": "I bought the fruit","sourceText": "我我买的水果"}},"isBad":0,"name":"中文翻译英文大数据.xlsx-36","machineText":{"reference":"I bought the fruit, and you can see that I bought the best.","resultText":"I bought the fruit, and you can see that I bought the best.","sourceText":"我我买的水果，你就可以看出我是买的最好的。","id":"36"},"id":"0","defaultResult":{"reference":"I bought the fruit, and you can see that I bought the best.","resultText":"I bought the fruit, and you can see that I bought the best.","sourceText":"我我买的水果，你就可以看出我是买的最好的。","id":"36"},"status":0},{"extend":{"user":{"reference": "I bought the fruit","resultText": "I bought the fruit","sourceText": "我我买的水果"}},"isBad":0,"name":"中文翻译英文大数据.xlsx-37","machineText":{"reference":"Hello, I'm going to the United States, but my English is not very good.","resultText":"Hello, I'm going to the United States, but my English is not very good.","sourceText":"嗯你好，我要去美国了，但是我英语不太好。","id":"37"},"id":"1","defaultResult":{"reference":"Hello, I'm going to the United States, but my English is not very good.","resultText":"Hello, I'm going to the United States, but my English is not very good.","sourceText":"嗯你好，我要去美国了，但是我英语不太好。","id":"37"},"status":0}],"step":0,"markTaskId":"985807FBA7114FA5A940F1F9508AF855","lastIndex":0,"markStandard":"<p>sdas dfs f</p>","batchId":"B526912D90944C658C32E5851BEA2C0F","lastMarkTaskId":""}`
    this.getDefaultFileCallBack(mockData);
    // 快捷键事件绑定
  },
  methods: {
    getDefaultFileCallBack (info) {
      if (!info) return;
      info = JSON.parse(info);

      let files = info.files; // 过滤出后台返回来的files
      let lastIndex = info.lastIndex * 1;

      self.initFiles(files, lastIndex);
    },
    /**
      * 数据初始化
      * @param files
      * @param lastIndex
      */
    initFiles (files, lastIndex) {
      // 遍历循环全部数据
      let curIndex = 0;
      files.forEach((item, ind) => {
        let result = item.defaultResult;
        let extend = item.extend;

        if (item) {
          self.files.allInfo.push({ // 文件不为空 直接赋值到全部数据
            result, //
            extend, // 供初始数据使用
            isBad: item.isBad,
            name: item.name,
            id: item.id,
            index: item.id,
            status: item.status,
            isDefaultData: true // 是否是原始数据
          });
          if (item.id * 1 === lastIndex * 1) {
            curIndex = ind;
          }
        }
      });
      self.selectData(1, curIndex); // 选择数据 所有数据 好数据 坏数据 未标注
    },
    /**
      *  选择区域数据
      * @param _type
      * @param lastIndex
      */
    selectData (_type, lastIndex) {
      if (isNaN(Number(lastIndex))) {
        lastIndex = 0 // 如果 lastIndex 无非转换成数字 默认0
      }

      self.files.showType = _type;
      var showList = self.files.allInfo

      for (var i = 0; i < showList.length; i++) {
        var file = showList[i];
        file.last = i === 0 ? null : showList[i - 1];
        file.next = i === showList.length - 1 ? null : showList[i + 1];
      }

      self.files.showList = showList; // 给当前列表赋值

      self.selectFile(self.files.showList[lastIndex]);
    },
    /**
      * 选择单个文件
      * @param item 当前条的数据
      */
    async selectFile (item) {
      var self = this;
      if (!item) {
        self.files.curIndex = -1;
        self.$set(self.files, 'current', {});
        return false;
      } // 如果空 返回
      self.files.curIndex = item.id;
      self.$set(self.files, 'current', item); // 这里先赋值 数据
      self.initFile(item);
    },
    /**
      * 初始化单个文件
      * @param item
      */
    async initFile (item) {
      // 判断是否获取最新结果 并初当前加载参数
      console.log(item)
      await self.getCurResult(item);
      // this.$refs.MarkContent.$emit('initFile', item) // 通知子组件 重置组件
    },
    /**
      * 从结果服务中获取是否存在新的结果
      * @param file
      */
    async getCurResult (file) {
      let info = saveDataBase[file.id] // 从数据库拿数据
      if (!info) return; // 没有最新数据
      file.result = JSON.parse(info.resultText) // extend
      file.isDefaultData = false
      file.isBad = info.stamp
      console.log(file, '最新')
    },
    /**
     * 保存
     */
    saveResult: function () {
      this.$refs.MarkContent.$emit('saveBefore')
      if (this.saveCheckType === 0) return;// 校验失败
      this.saveCheckType = 0; // 重置校验标识

      let file = self.files.current
      let flatData = file.result;
      let submitData = JSON.stringify(flatData);
      // 校验结果数据
      //
      //

      saveDataBase[file.id] = {
        stamp: file.isBad,
        resultText: submitData
      }
    },
    markBadData () {
      var file = this.files.current
      if (file.isBad === 0) {
        file.isBad = 1; // 修改当前文件状态
      } else {
        file.isBad = 0;
      }
    },
    nextTask () {
      var file = this.files.current
      if (!file.next) {
        // self.ui.fade("已是最后一条");
        return false;
      }
      // this.$refs.MarkContent.$emit('nextTask')
      self.saveResult() // 保存一遍数据
      self.selectFile(file.next);
    },
    preTask () {
      var file = this.files.current
      if (!file.last) {
        // self.ui.fade("已是第一条");
        return false;
      }
      // this.$refs.MarkContent.$emit('preTask')
      self.saveResult();
      self.selectFile(file.last);
    },
    hideHeader (showType) {
      this.arrowShow = showType;
    },
    // 子组件点击事件 左侧列表显示隐藏
    changeFileList (listShowType) {
      this.listShow = listShowType;
    }
  },
  components: {
    Header,
    CenterControl,
    FileList,
    MarkContent
  }
}
</script>

<style lang="less" scoped>
  .preview_wrapper{
    position: fixed;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #f7f7f7;
  }
</style>
